<template>
    <div class="mainDiv">
        <div class="rowHead">
            <el-button type="success" icon="plus" @click="addcardsss" v-qx="quanxian.add">客户开卡</el-button>
            <el-button type="primary" icon="h-shuaxin1" style="float:right" @click="refresh">刷新列表</el-button>
        </div>
        <el-row :gutter="20" class="rowHead">
            <el-col :span="14">
                <el-tag type="success">筛选</el-tag>
                <el-date-picker v-model="page.times" type="daterange" align="right" placeholder="请选择日期范围" @change="getList" :picker-options="pickerOptions2">
                </el-date-picker>
                <el-select v-model="page.zt" @change="getList" class="ml w200" v-qx="quanxian.status">
                    <el-option v-for="o in zhuanttai" :label="o.txt" :value="o.val"></el-option>
                </el-select>
                <el-button type="primary" @click="outXlsx">导出数据</el-button>
            </el-col>
            <el-col :span="10">
                <el-input placeholder="搜索单号、开卡客户、会员卡号" @keyup.enter.native="getList" v-model="page.search">
                    <i slot="suffix" class="el-icon-search" style="line-height: 40px;width: 25px;cursor: pointer;" @click="getList"></i>
                </el-input>
            </el-col>
        </el-row>
        <el-table :data="opencards" :stripe="true" height="100%">
            <!-- <el-table-column prop="id" label="ID" width="80"></el-table-column> -->
            <el-table-column prop="order_sn" label="开卡单号" width="170"></el-table-column>
            <el-table-column prop="gname" label="客户">
                <template slot-scope="scope">
                    <span @click="openGuestPage(scope.row.gid)" style="cursor:pointer;color:#f50">{{scope.row.gname}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="shopname" label="所属分店" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="vipcard" label="会员卡号"></el-table-column>
            <el-table-column prop="recemoney" label="现金消费">
                <template slot-scope="scope">{{scope.row.recemoney+'元'}}</template>
            </el-table-column>
            <el-table-column prop="usebalance" label="余额消费">
                <template slot-scope="scope">{{scope.row.usebalance+'元'}}</template>
            </el-table-column>
            <el-table-column prop="usegiftbalance" label="赠送金额消费">
                <template slot-scope="scope">{{scope.row.usegiftbalance+'元'}}</template>
            </el-table-column>
            <el-table-column prop="remarks" label="开卡描述" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="aname" label="开单人"></el-table-column>
            <el-table-column prop="zname" label="审核人">
                <template slot-scope="scope">{{scope.row.zname?scope.row.zname:'暂无'}}</template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80">
                <template slot-scope="scope">
                    <Tags :typeValue="scope.row.status" typeName="orderStatus" :tagStyle="{color: '#fff'}"></Tags>
                </template>
            </el-table-column>
            <el-table-column prop="addtime" label="开单日期" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{scope.row.addtime|dateTime}}
                </template>
            </el-table-column>
            <el-table-column label="产品操作" width="160">
                <template slot-scope="scope">
                    <el-button-group v-if="scope.row.status==0">
                        <el-button type="info" icon="el-icon-h-chakan" size="mini" @click="newchakan(scope.row)" v-qx="quanxian.look"></el-button>
                        <el-button icon="el-icon-h-del" type="danger" size="mini" @click="shanchu(scope.row.id)" v-qx="quanxian.del"></el-button>
                    </el-button-group>
                    <el-button-group v-else>
                        <el-button type="info" icon="el-icon-h-chakan" size="mini" @click="newchakan(scope.row)" v-qx="quanxian.look"></el-button>
                        <!-- <el-button type="info" icon="h-chakan" size="small" @click="chakan(scope.row.id)" v-qx="quanxian.look"></el-button> -->
                        <el-button type="primary" icon="el-icon-h-dayin" size="mini" @click="dayin(scope.row.id)" v-qx="quanxian.print"></el-button>
                        <el-tooltip content="反结账" placement="top" :open-delay="500" v-qx="quanxian.fan">
                            <el-button icon="el-icon-h-qiyong" type="danger" size="mini" @click="unpay(scope.row.id)"></el-button>
                        </el-tooltip>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top:5px">
            <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page.pages" :page-sizes="[15, 30, 50, 100]" :page-size="page.limits" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import C from '#/src/common/common.js'
import P from '#/src/shop/popup.js'
import Guest from '#/src/shop/guest.js'
import Tags from '@/components/orderTags.vue'
export default {
    name: 'openCardList',
    data() {
        return {
            opencards: [],
            total: 0,
            page: {
                pages: 1,
                limits: 15,
                search: '',
                zt: 0,
                times: [new Date(), new Date()],
            },
            currt: '',
            zhuanttai: [{
                txt: '请选择单据状态',
                val: 0
            }, {
                txt: '未结账',
                val: 1
            }, {
                txt: '已结账未分配',
                val: 2
            }, {
                txt: '已结账已分配',
                val: 3
            }],
            quanxian: {
                add: 'opencards_add',
                status: 'opencards_status',
                del: 'opencards_del',
                look: 'opencards_look',
                print: 'opencards_print',
                fan: 'opencards_fan',
            },
            pickerOptions2: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, td])
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, td])
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, td])
                    }
                }]
            }
        }
    },
    methods: {
        refresh: function() {
            this.getList()
        },

        // 反结账功能
        unpay: function(id) {
            C.confirm('此操作将清除已结账的信息, 是否继续?', async() => {
                let res = await C.ajax('/shop/card/unpay', { id: id }, 'post')
                if (res) {
                    C.success(res.data)
                    this.getList()
                }
            })
        },
        // 删除订单
        shanchu: function(id) {
            C.confirm('删除当前订单, 是否继续?', async() => {
                let res = await C.ajax('/shop/card/deleteopencarde', { id: id }, 'post')
                if (res) {
                    C.success(res.data)
                    this.getList()
                }
            })
        },
        newchakan: async function(row) {
            await P.openCardPopup({ id: row.id, status: row.status })
            this.getList()
        },
        // 打印当前订单
        dayin: async function(id) {
            await C.openBrowserWindow('/printOpenCard', { id: id }, { width: 245, height: 900, useSpa: true, spaModel: 'print' })
        },
        sizeChange: function(val) {
            this.page.limits = val
            this.getList()
        },
        currentChange: function(val) {
            this.page.pages = val
            this.getList()
        },
        getList: async function() {
            let data = await C.ajax('/shop/card/opencardlist', { page: JSON.stringify(this.page) }, 'post')
            if (data) {
                this.opencards = data.data
                this.total = data.count
            }
        },
        addcardsss: async function() {
            await P.openCardPopup()
            this.getList()
        },
        async outXlsx() {
            let header = {
                order_sn: '单号',
                gname: '客户姓名',
                gphone: '客户电话',
                vipcard: '会员卡号',
                recemoney: '消费现金',
                usebalance: '余额消费',
                usegiftbalance: '赠送余额消费',
                addtime: {
                    value: '开卡时间',
                    fun: C.times
                },
                aname: '操作员',
                zname: '审核员'
            }
            let filter = C.copy(this.page)
            filter.limits = 60000
            let data = await C.ajax('/shop/card/opencardlist', { page: JSON.stringify(filter) }, 'post')
            let name
            if (filter.times && (filter.times[0] != null && filter.times[1] != null)) {
                name = C.time(Math.round(new Date(filter.times[0]).getTime() / 1000)) + '至' + C.time(Math.round(new Date(filter.times[1]).getTime() / 1000)) + '开卡数据'
            } else {
                name = '历史所有开卡数据'
            }
            await C.excel(name, header, data.data)
        },
        openGuestPage(id) {
            Guest.openGuestPage(id)
        }
    },
    mounted: function() {
        this.getList()
    },
    components: { Tags }
}
</script>